<template>
  <div class="tab-wrapper w700">
    <van-loading v-show="!tags.length" type="circular" color="#fff" vertical>加载歌单标签分类...</van-loading>
    <swiper
      ref="mySwiper2"
      id="tab_swiper"
      :options="swiperOptions"
      v-if="tags.length > 0"
      @click.stop
    >
      <swiper-slide
        v-for="(item,index) in tags"
        class="swiper-slide"
        :class="{'active':currentIndex===item.id}"
        :key="index"
      >
        <span>{{item.name}}</span>
      </swiper-slide>
    </swiper>
  </div>
</template>

<script>
import { Swiper, SwiperSlide, directive } from "vue-awesome-swiper";
let vm = null;
export default {
  props: {
    tags: {
      type: Array,
      default: []
    }
  },
  data() {
    return {
      currentIndex: -1,
      currentName: "",
      currentTag: "推荐",
      swiperOptions: {
        freeMode: true,
        freeModeMomentumRatio: 0.5,
        slidesPerView: "auto",
        resistanceRatio: 0.7,
        slidesPerView: "auto",
        // slideToClickedSlide: true,
        on: {
          tap: function(event) {
            //如果点击的是自身actived，则不做操作：
            if (vm.currentIndex == vm.tags[this.clickedIndex].id) {
              return;
            }
            vm.currentIndex = vm.tags[this.clickedIndex].id;
            vm.currentTag = vm.tags[this.clickedIndex].name;
            var slide,
              slideLeft,
              slideWidth,
              slideCenter,
              nowTlanslate,
              maxWidth;
            slide = this.clickedSlide;
            slideLeft = slide.offsetLeft;
            slideWidth = slide.clientWidth;
            slideCenter = slideLeft + slideWidth / 2;
            maxWidth = -this.maxTranslate() + this.width / 2;
            this.setTransition(300);
            if (slideCenter < this.width / 2) {
              this.setTranslate(0);
            } else if (slideCenter > maxWidth) {
              this.setTranslate(this.maxTranslate());
            } else {
              nowTlanslate = slideCenter - this.width / 2;
              this.setTranslate(-nowTlanslate);
            }
            vm.$emit("handleTabClicked", vm.currentTag);
          }
        }
      }
    };
  },
  computed: {},
  created() {
    vm = this;
  },
  components: {
    Swiper,
    SwiperSlide
  }
};
</script>

<style lang="less" scoped>
#tab_swiper {
  .swiper-slide {
    width: fit-content;
    padding-right: 0.6rem;
    text-align: center;
    span {
      display: block;
      font-size: 16px;
      text-align: left;
    }
    &.active {
      span {
        color: @mc;
      }
    }
  }
}
</style>